<template>
  <div class="common-layout">
    <el-container>
      <el-header>
          <div class="title">
              <el-row justify="start">
                  <h1 style="margin-top: 20px; margin-left: 10px;">
                      EasyBrain
                  </h1>
                  <a href="/" id="exit">退出登录</a>
              </el-row>
          </div>
      </el-header>
      <el-container>
      <el-aside>
          <el-row class="tac">
            <el-col :span="16">
              <el-menu router
                :default-active="activeIndex"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
              > 
                <el-menu-item index="/home">
                  <el-icon><location /></el-icon>
                  <span>我的主页</span>
                </el-menu-item>
                <el-menu-item index="/device">
                  <el-icon><Monitor /></el-icon>
                  <span>设备管理</span>
                </el-menu-item>
                <el-menu-item index="/flow">
                  <el-icon><document /></el-icon>
                  <span>流程管理</span>
                </el-menu-item>
                <el-menu-item index="/info">
                  <el-icon><setting /></el-icon>
                  <span>个人信息</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <div class="personInfo">
            <el-form :model="form" :label-position="labelPosition" label-width="120px">
              <el-form-item>
                <label id="personTitle">个人信息</label>
              </el-form-item> 
              <el-form-item label="用户名">
                <el-input v-model="form.name" />
              </el-form-item>
              <el-form-item label="昵称">
                <el-input v-model="form.nickname" />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="form.email" />
              </el-form-item>
              <el-form-item label="注册日期">
                <el-col>
                  <el-date-picker
                    v-model="form.date"
                    type="date"
                    style="width: 100%"
                  />
                </el-col>
              </el-form-item>
              <el-form-item label="原密码">
                <el-input v-model="form.password" type="password" show-password/>
              </el-form-item>
              <el-form-item label="新密码">
                <el-input v-model="form.newpwd" type="password" show-password/>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'

// 导航router
const activeIndex='/info';
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

// 表单
const form = reactive({
  name:'',
  nickname:'',
  email:'',
  date:'',
  password:'',
  newpwd:''
})
const labelPosition = ref('right')
// 保存按钮点击事件
const onSubmit = () => {
  console.log('submit!')
}
</script>
<style>
/* header全框 */
.title{
  border-bottom:1px solid black;
}
/* 个人信息表单 */
.personInfo{
  width:400px;
}
/* 个人信息表头 */
#personTitle{
  font-size: 22px;
  font-weight: bolder;
}
</style>
